<template>
<div>
    <!-- <headerNavigation :jump="1"></headerNavigation> -->
    <labelNavigation :Xuexidata="semesterName"></labelNavigation>
    <button class="return" @click="back()">
  <i class="el-icon-arrow-left"></i>
  返回
</button>

    <div class="photoCountainer">
    <div class="background">
        <img src="@/assets/imagesbackground/sum.png" >
        <div class="imageCountainer1">
        <el-upload
        class="semestersum"
        :action="uploadImgUrl1"
        list-type="picture-card"
        :on-success="handleUploadSuccess"
        :auto-upload="false" 
        :on-error="handleUploadError"
        ref="imageUpload1"
        :show-file-list="true"
        :headers="headers"
        :file-list="fileList1"
        :before-upload="handleBeforeUpload"
        accept="image/jpg,image/jpeg,image/png"
        >
        <i class="el-icon-plus"></i>
      </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
        <div class="imageCountainer2">
        <el-upload
        class="semestersum"
        :action="uploadImgUrl2"
        list-type="picture-card"
        :on-success="handleUploadSuccess"
        :auto-upload="false" 
        :on-error="handleUploadError"
        ref="imageUpload2"
        :show-file-list="true"
        :headers="headers"
        :file-list="fileList2"
        :before-upload="handleBeforeUpload"
        accept="image/jpg,image/jpeg,image/png"
        >
        <i class="el-icon-plus"></i>
      </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
        <div class="imageCountainer3">
        <el-upload
        class="semestersum"
        :action="uploadImgUrl3"
        list-type="picture-card"
        :on-success="handleUploadSuccess"
        :auto-upload="false" 
        :on-error="handleUploadError"
        ref="imageUpload3"
        :show-file-list="true"
        :headers="headers"
        :file-list="fileList3"
        :before-upload="handleBeforeUpload"
        accept="image/jpg,image/jpeg,image/png"
        >
        <i class="el-icon-plus"></i>
      </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
    </div>
        <!-- 按钮 -->
        <div class="btnCountainer">
            <div class="btnCountainer2">
            <button class="btn" @click="next">保存并下一模块</button>
            <button class="btn" @click="confirmFn">保存</button>
            <!-- <button class="btn">取消</button> -->
            <button class="btn"  @click="showModal=true">获取图库照片</button>
            </div>
        </div>
    <!-- 弹框 -->
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
      <div class="Countainer">
      <div class="leftCountainer">
        <button
          class="show-Photo"
          :class="{ photoshow: classIndex == index }"
          v-for="(item, index) in classselfphoto"
          :key="index"
          @click="(classIndex = index), photosFn()">
          {{ item.name }}
        </button>
        </div>
        <div class="ClassPhotoCountainer">
        <img :src="`${src1 + item}`" class="imagesList" :class="{show:echaIndex==index}" :key="index"
          v-for="(item, index) in imageList"
          alt=""
          @click="chuanc({item},index)"/>
          <button @click="submit" class="btn1">确定</button>
                <select class="optionimg" v-model="num">
                <option  value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
          </div>
        </div>
      </div>
    </div>
    <!-- <footerNavigation></footerNavigation> -->
</div>
</template>
<script>
// import headerNavigation from "../components/background/headerNavigation"
import labelNavigation from "../components/background/labelNavigation"
// import footerNavigation from "../components/background/footerNavigation"
import { getToken } from "@/utils/auth";
import { studentbsogsoAPI, allphotosAPI, optionimgreport } from '@/api/make/make'
import module from '../../allurlimg/img'
import * as imageConversion from 'image-conversion'
export default {
    components:{
        // headerNavigation,
        labelNavigation,
        // footerNavigation
    },
    data() {
      return {
        classIndex: 0,
        photShow: true,
        DataList:[],
        classselfphoto: [{ name: "个人图库" }, { name: "班级图库" }],
        imageList: [],

        src1:'',
        number: 0,
        num:'1',
        uploadList: [],
        echaIndex:'',
        dialogImageUrl: "",
        dialogVisible: false,
        hideUpload: false,
        showModal:false,
        semesterName:"",
        studentId:'',
        growKey:'',
        growthId:'',
        galleryId:'1',
        uploadImgUrl1:process.env.VUE_APP_BASE_API + `/business/gallery/upload/`+this.studentId+"/"+this.growKey+"/"+1,
        uploadImgUrl2:process.env.VUE_APP_BASE_API + `/business/gallery/upload/`+this.studentId+"/"+this.growKey+"/"+2,
        uploadImgUrl3:process.env.VUE_APP_BASE_API + `/business/gallery/upload/`+this.studentId+"/"+this.growKey+"/"+3,
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        fileList1: [],
        fileList2: [],
        fileList3: [],
        imageList:[]
      };
    },
  mounted(){
     window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
  },
    async created(){
        //学期
        let semesterName=this.$route.query.semesterName
        console.log("33333",this.$route.query.semesterName)
        if(semesterName!=undefined){
        sessionStorage.setItem("semesterName",this.$route.query.semesterName)
        this.semesterName=sessionStorage.getItem("semesterName")
        }
        else{
        this.semesterName=sessionStorage.getItem("semesterName")
        }
        this.src1=module.host
        console.log(this.$route.params)
        let studentId=this.$route.params.stuId
        let growthId=this.$route.params.growthId
        if(studentId!=undefined){
          sessionStorage.setItem("studentId",this.$route.params.stuId)
          this.studentId=sessionStorage.getItem("studentId")
        }
        else{
          this.studentId=sessionStorage.getItem("studentId")
        }
        if(growthId!=undefined){
           sessionStorage.setItem("growthId",this.$route.params.growthId)
            this.growthId=sessionStorage.getItem("growthId")
        }else{
          this.growthId=sessionStorage.getItem("growthId")
        }
        //获取图库图片
        this.photos();
        this.growKey=9
        this.uploadImgUrl1=process.env.VUE_APP_BASE_API + `/business/growthItem/upload/`+this.studentId+"/"+this.growKey+"/"+1,
        this.uploadImgUrl2=process.env.VUE_APP_BASE_API + `/business/growthItem/upload/`+this.studentId+"/"+this.growKey+"/"+2,
        this.uploadImgUrl3=process.env.VUE_APP_BASE_API + `/business/growthItem/upload/`+this.studentId+"/"+this.growKey+"/"+3,
        console.log(this.studentId,this.growthId)
        const res=await studentbsogsoAPI({studentId:this.studentId,growthId:this.growthId})
        // console.log("111111",res)
        console.log(res.data["9"]['img1'])
        let url1=module.host+res.data["9"]['img1']
        let url2=module.host+res.data["9"]['img2']
        let url3=module.host+res.data["9"]['img3']
         this.fileList1.push({
          url:url1
        })
        this.fileList2.push({
          url:url2
        })
        this.fileList3.push({
          url:url3
        })
    }, 
    methods: {
    photosFn() {
      if (this.classIndex === 0) {
        this.imageList = this.DataList.userGallery;
      } else if(this.classIndex === 1){
        this.imageList = this.DataList.gradeGallery;
      }
      this.photShow = false
      this.$nextTick(function() {
      this.photShow = true
      })
    },
      back() {
      this.$router.go(-1)
      },

      //保存并返回首页
      next(){
        if(this.showModal === true){
        this.$router.push('/doGrowth/mygrow')
        }else{
        this.$refs.imageUpload1.submit();
        this.$refs.imageUpload2.submit();
        this.$refs.imageUpload3.submit();
        this.$router.push('/doGrowth/mygrow')
        }
   
      },

    // 获取图库图片
    async photos() {
      // this.echaIndex=''
      const res1 = await allphotosAPI({ studentId: this.studentId });
      this.DataList = res1.data;
      if (this.classIndex === 0) {
        this.imageList = this.DataList.userGallery;
      } else {
        this.imageList = this.DataList.gradeGallery;
      }
    },

      chuanc(data,index){
        this.echaIndex = index
        this.path=data.item
        console.log(this.path)
      },
      submit() {
          this.fileList1=[],
          this.fileList2=[],
          this.fileList3=[]
          this.confirm(this.path)
          this.showModal=false
      },
      async confirm(){
          this.growthKey=9
          const res2 = await optionimgreport({studentId:this.studentId,growthKey:this.growthKey,remark:this.num,path:this.path})
          const res=await studentbsogsoAPI({studentId:this.studentId,growthId:this.growthId})
        if(res.code===200){
          console.log(res.data["9"]['img1'])
          let url1=module.host+res.data["9"]['img1']
          let url2=module.host+res.data["9"]['img2']
          let url3=module.host+res.data["9"]['img3']
          this.fileList1.push({
          url:url1
          })
          this.fileList2.push({
          url:url2
          })
          this.fileList3.push({
          url:url3
          })
          this.$message.success("从图库上传图片成功")
        }else{
           this.$message.error("从图库上传图片失败")
        }
      },
      //上传图片前
      handleBeforeUpload(file) {
          var img = file.name.substring(file.name.lastIndexOf('.') + 1)
          const suffix = img === 'jpg'||"JPG"
          const suffix2 = img === 'png'||"PNG"
          const suffix3 = img === 'jpeg'||'JPEG'
          const isLt1M = (file.size / 1024 / 1024) * 10 < 6;
          if (!suffix && !suffix2 && !suffix3) {
            this.$message.error("只能上传图片！");
            return false
          }
          else if (!isLt1M) {
          this.$message.warning("上传头像图片大小不能超过 600kb! 将进行压缩");
          let myImg = new Promise((resolve) => {
            // 压缩到500KB,这里的500就是要压缩的大小,可自定义
          imageConversion.compressAccurately(file, 500).then((res) => {
              resolve(res);
            });
          });
          return myImg;
          }
          return isLt1M;
      },

      // 上传成功回调
      handleUploadSuccess(res, file) {
         if(res.code===200){
          this.$message({
          message: '恭喜你，上传成功',
          type: 'success'
        });
        }else{
           this.$message({
           message: '上传失败,请重新上传',
           type: 'error'
        });
      }
      },
      // 上传失败
      handleUploadError() {
        this.$modal.msgError("上传图片失败，请重试");
      },
      confirmFn(){
        this.$refs.imageUpload1.submit();
        this.$refs.imageUpload2.submit();
        this.$refs.imageUpload3.submit();
      }
    },
        }
</script>

<style scoped>
.background{
    position: relative;
    margin-top:3.125rem;
}
.semestersum ::v-deep .el-upload--picture-card{
    position: absolute;
    z-index: 2;
    height: 7.0625rem !important;
    width: 17.125rem !important;
    border: .0625rem solid rgba(124, 0, 0, 1);
    border-style: dashed;
    /* left: 20%; top: 30%; */
    border-radius: 0;
}
.el-icon-plus:before{
  content: "\A\E6D9\A点击上传图片" !important;
	font-size:1.25rem !important;
	white-space:pre !important;
  color: rgba(124, 0, 0, 1);
}
.background img{
  height: 34rem;
  width: 24rem;
  display: flex;
  margin: 0 auto;
}
.upload-img-btn span{
    width: 100%;
    height: 3.125rem;
    color: rgba(124, 0, 0, 1);
    text-align: center;
    margin-bottom: 1.875rem;
}
.btnCountainer{
    display: flex;
    margin-top: 3.75rem;
    justify-content: center;
}
.btn{
   background-color: rgba(124, 0, 0, 1);
   color: aliceblue;
   border: .0625rem solid rgba(187, 187, 187, 1);
   width: 10.625rem;
   height: 3.125rem;
   font-size: 1.25rem;
}
.btnCountainer2{
    width: 46.875rem;
    display: flex;
    justify-content: space-between;
}
.imageCountainer1{
    position: absolute;
    z-index: 3;
    height: 7.0625rem !important;
    width: 17.125rem !important;
    left: 50%; top: 25%;
    transform: translate(-50%, -50%);
    border-radius: 0;
}
.semestersum ::v-deep .el-upload-list__item {
    height: 7.0625rem !important;
    width: 17.125rem !important;
    position: absolute;
    z-index: 3;
}
.imageCountainer2{
  position: absolute;
  z-index: 3;
  height: 7.0625rem !important;
  width: 17.125rem !important;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.imageCountainer3{
    position: absolute;
    z-index: 3;
    height: 7.0625rem !important;
    width: 17.125rem !important;
    left: 50%; top: 75%;
    transform: translate(-50%, -50%);
    border-radius: 0;
}
/* 弹框 */
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  z-index: 4;
  position: absolute;
  background-color: #fff;
  position: fixed;
  top: 6.25rem;
  left: 18.75rem;
  width: 56.25rem;
  height:50rem;
  z-index: 4;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius: .625rem;
}
.btn1{
    position: absolute;
    height: 3.125rem;
    width: 6.25rem;
    bottom: 0;
    right: 0;
    background-color: brown;
    color: white;
    font-size: 1.25rem;
}
.imagesList{
    height: 9.375rem;
    width: 9.375rem;
    border: .0625rem solid rgba(187, 187, 187, 0.47);
    margin-top: 1.25rem;
    margin-left: 1.25rem !important;
}
.optionimg{
  position: absolute;
  height: 3.125rem;
  width: 6.25rem;
  bottom: 3.75rem;
  right: 0;
  background-color: brown;
  color: white;
  font-size: 1.25rem;

}

.return {
  font-size: 1.125rem;
  text-align: center;
  position: relative;
  left: 27.5rem;
  border: 0rem;
  background: #fff;
}
.show {
 border: 1.0325rem solid rgb(124, 0, 19);
 border-style: dashed;
 height: 9.375rem;
 width: 9.375rem;
 margin-top: 1.25rem;
 margin-left: 1.25rem !important;
}
.photoshow {
  color: #7c0000;
  /* padding-bottom: 0.3125rem; */
  border-bottom: 0.1875rem solid #7c0000 !important;
}
.show-Photo {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}
.ClassPhotoCountainer{
  overflow:auto;
  height: 40.125rem;
  width: 50.75rem;
  border: 0.0625rem solid rgba(187, 187, 187, 0.47);
  margin: 0 auto;
  margin-top: 1.25rem;
}
</style>